<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<!-- 引入路由组件 https://unpkg.com/vue-router@4 -->
		<script src="https://unpkg.com/vue-router@4"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{message}} -->
			
			<h2>网站导航</h2>
			<a href="#/">首页</a>&nbsp;&nbsp;
			<a href="#/about">关于页</a>&nbsp;&nbsp;
			<a href="#/login">登录页</a>&nbsp;
			<a href="#/list">商品列表</a>
			
			<h2>网站导航-方式2</h2>
			<router-link to="/">首页</router-link>&nbsp;&nbsp;
			<router-link to="/about">关于页</router-link>&nbsp;&nbsp;
			<router-link to="/login">登录页</router-link>&nbsp;&nbsp;
			<router-link to="/list">商品列表</router-link>&nbsp;&nbsp;
			<h3>通过路径传递/detail/商品编号</h3>
			<router-link to="/detail/1">商品1</router-link>
			<router-link to="/detail/2">商品2</router-link>
			<h3>通过参数传递?id=商品编号</h3>
			<router-link to="/detail2?id=1">商品1</router-link>
			<router-link to="/detail2?id=2">商品2</router-link>
			
			<!-- 路由出口 当前的路由会显示在这个标签中-->
			<router-view></router-view>
		</div>
		
		<script type="module">
			// 1. 导入组件
			import home from './home.js'
			import about from './about.js'
			import login from './login.js'
			import productdetail from './productdetail.js'
			import productdetail2 from './productdetail2.js'
			import productlist from './productlist.js'
			
			// 2. 定义路由配置信息
			// path 指定访问路径
			// component 对应的组件
			const routes = [
				{path:"/",component: home},
				{path:"/about",component: about},
				{path:"/login",component: login},
				{path:"/detail/:id",component:productdetail},
				{path:"/detail2",component:productdetail2},
				{
					path:"/list",
					component:productlist,
					children:[
						{
							path:"item/:id",
							component:productdetail,							
						}
					]
				},
			]
			
			// http://www.xxxx.com/about/index.html
			// http://www.xxxx.com/about/index.aspx
			
			// hash模式
			// http://www.xxxx.com/
			// http://www.xxxx.com/#about
			// http://www.xxxx.com/#login
			
			// 3. 创建路由对象
			// hash模式 VueRouter.createWebHashHistory(),  #/   #/index #/login
			// VueRouter.createWebHashHistory()            /    /about   /logn  刷新页面会出问题
			const router = VueRouter.createRouter(
			{
				// 制定一个路径的访问模式 Hash模式
				history: VueRouter.createWebHashHistory(),
				routes,
			}
			)
			
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!"
					}
				}
			});
			
			// 4. 让应用支持路由
			app.use(router)
			
			var vm = app.mount("#app")
			
			// 练习:
			// 1. 添加一个注册页
			// 2. 添加一个商品列表
		</script>



	</body>
</html>